<template>
  <div class="substation_details">
    <template v-if="substationData.id">
      <div class="model_content gl_padding_10">
        <div class="model_content_top gl_clear">
          <div class="model_content_topImg gl_fl">
            <img :src="getStaticFileUrl(substationData.logoImage)" @error="errorPhoto">
          </div>
          <div class="model_content_topInfo">
            <div class="topInfo_name">{{ substationData.leagueName }}-{{ substationData.name }}</div>
            <div>
              <span
                class="topInfo_status"
                :class="{'status_ApproveSuccess': substationData.approveStatusCode === 'ApproveSuccess', 'status_Approved': substationData.approveStatusCode === 'NotApproved'}"
              >
                {{ substationData.approveStatus.name }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <ul class="model_content gl_py_20 gl_px_15">
        <li class="detail_item gl_clear">
          <div class="detail_label gl_fl">比赛时间</div>
          <div class="detail_content ">{{ substationData.startTime ? substationData.startTime.slice(0, 10) : '-' }} 至 {{ substationData.endTime ? substationData.endTime.slice(0, 10) : '-' }}</div>
        </li>
        <li class="detail_item gl_clear">
          <div class="detail_label gl_fl">认证等级</div>
          <div class="detail_content ">{{ substationData.competitionCertificationLevelName }}</div>
        </li>
        <li class="detail_item gl_clear">
          <div class="detail_label gl_fl">比赛地址</div>
          <div class="detail_content ">{{ substationData.address }}</div>
        </li>
        <li class="detail_item gl_clear">
          <div class="detail_label gl_fl">负责人</div>
          <div class="detail_content ">{{ substationData.responsiblePersonName }}</div>
        </li>
        <li class="detail_item gl_clear">
          <div class="detail_label gl_fl">联系电话</div>
          <div class="detail_content ">{{ substationData.responsiblePersonPhone }}</div>
        </li>
        <li class="detail_item gl_clear">
          <div class="detail_label gl_fl">申请机构</div>
          <div class="detail_content ">{{ substationData.enterDelegationName }}</div>
        </li>
      </ul>
      <div v-if="substationData.id && substationData.approveStatusCode === 'ApproveFailed'" class="model_content">
        <van-button class="edit_btn_style" :icon="img_desc" color="#fff" block @click="doEdit">编辑信息</van-button>
      </div>
    </template>
    <!-- bottom btn -->
    <div class="bottom_btn">
      <van-button class="bottom_btn_style" type="primary" color="#31456c" block @click="jumpToBack">返回</van-button>
    </div>

    <!-- 编辑弹框 -->
    <van-popup v-model="dialogVisibleForEdit" get-container="#app" position="right" :style="{ width: '100%', height: '100%' }">
      <div class="add_member">
        <van-nav-bar class="main_header" title="编辑">
          <template #left>
            <span @click="dialogVisibleForEdit = false">返回</span>
          </template>
          <template #right>
            <span @click="submitSubstationInfo">确定</span>
          </template>
        </van-nav-bar>
        <div class="add_member_content">
          <van-form ref="processForm">
            <van-field
              required
              readonly
              clickable
              :value="showDate"
              label="比赛时间"
              placeholder="请选择比赛时间"
              :rules="rules.startTime"
              @click="showCalendar = true"
            />
            <van-field
              v-model.trim="vo.name"
              required
              label="分站赛名称"
              placeholder="请输入分站赛名称"
              :rules="rules.name"
            />
            <van-field
              required
              readonly
              clickable
              :value="levelShowName"
              label="认证等级"
              placeholder="请选择赛事的认证等级"
              :rules="rules.competitionCertificationLevelId"
              @click="showPicker = true"
            />
            <van-field
              v-model.trim="vo.address"
              required
              label="比赛地址"
              placeholder="请输入比赛地址"
              :rules="rules.address"
            />
            <van-field
              v-model.trim="vo.responsiblePersonName"
              required
              label="负责人"
              placeholder="请输入负责人姓名"
              :rules="rules.responsiblePersonName"
            />
            <van-field
              required
              readonly
              clickable
              :value="vo.responsiblePersonPhone"
              label="联系电话"
              placeholder="请输入负责人的手机号"
              :rules="rules.responsiblePersonPhone"
              @click="showNumPanel = true"
            />
          </van-form>
          <!-- 辅助组件 -->
          <van-calendar v-model="showCalendar" color="#5073B5" type="range" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmDate" />
          <van-number-keyboard :show="showNumPanel" @blur="showNumPanel = false" @input="onInputNumPanel" @delete="onDeleteNumPanel" />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker show-toolbar :columns="levelList" value-key="name" @confirm="onConfirmPicker" @cancel="showPicker = false" />
          </van-popup>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  api_GET_EventsManagementCompetitionRequestCompetitionCertificationLevelListLeagueCompetitionId, // 获取分站赛的认证等级列表
  api_GET_EventsManagementCompetitionRequestCompetitionRequestCompetitionRequestId, // 根据申请Id获取申请的信息
  api_POST_EventsManagementCompetitionRequestCompetitionRequestResubmitCompetitionRequestId // 重新提交分站赛
} from '@/extend/api/gameswaggerApi/app';

import {
  SiSTKWEventsManagementCompetitionRequestResubmitInput // 重新提交分站赛
} from '@/lib/form/game/swaggerForm';

import {
  SiSTKWEventsManagementCompetitionRequestInput_Rules
} from '@/lib/validate/mobile/league';

import defaultPhoto from '@/assets/images/face_default.png';
import img_desc from '@/assets/images/league/mb_edit.png';

export default {
  data () {
    return {
      substationId: '',
      img_desc: img_desc,
      defaultPhoto: defaultPhoto,
      pageLoading: false,
      substationData: {},
      dialogVisibleForEdit: false,
      // ---
      vo: new SiSTKWEventsManagementCompetitionRequestResubmitInput(),
      rules: new SiSTKWEventsManagementCompetitionRequestInput_Rules(),
      levelList: [], // 认证等级列表
      levelShowName: '',
      showDate: '',
      minDate: new Date(),
      maxDate: new Date(),
      showCalendar: false, // 日期选择显示隐藏
      showNumPanel: false, // 数字软键盘显示隐藏
      showPicker: false // 认证等级选择显示隐藏
      // ---
    };
  },
  created () {
    this.substationId = this.$route.params.substationId;
    this.apiSubstationInfo(this.substationId);
  },
  methods: {
    apiSubstationInfo (id) {
      this.pageLoading = true;
      api_GET_EventsManagementCompetitionRequestCompetitionRequestCompetitionRequestId(id)
        .then(
          res => {
            this.pageLoading = false;
            this.substationData = res;
            this.formatLeagueCompetition(res);
            this.getLevelDictList(res.leagueCompetition.id);
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            this.$toast.fail(`获取分站赛信息失败 ${error.error.message}`);
          }
        );
    },
    // 返回
    jumpToBack () {
      this.$router.go(-1);
    },
    // 编辑
    doEdit () {
      const _data = this.substationData;
      // 处理vo
      this.vo.id = _data.id;
      this.vo.startTime = _data.startTime.slice(0, 10);
      this.vo.endTime = _data.endTime.slice(0, 10);
      this.vo.name = _data.name;
      this.vo.competitionCertificationLevelId = _data.competitionCertificationLevelId;
      this.vo.address = _data.address;
      this.vo.responsiblePersonName = _data.responsiblePersonName;
      this.vo.responsiblePersonPhone = _data.responsiblePersonPhone;
      // 处理组件显示
      this.levelShowName = _data.competitionCertificationLevelName;
      this.showDate = `${_data.startTime.slice(0, 10)} 至 ${_data.endTime.slice(0, 10)}`;
      // 显示组件
      this.dialogVisibleForEdit = true;
    },
    submitSubstationInfo () {
      this.$refs.processForm.validate()
        .then(() => {
          this.apiReSubmit(this.vo.id, this.vo);
        });
    },
    apiReSubmit (id, vo) {
      api_POST_EventsManagementCompetitionRequestCompetitionRequestResubmitCompetitionRequestId(id, vo)
        .then(
          res => {
            this.$toast({ type: 'success', message: `分站赛编辑成功，请等待审核。` });
            this.dialogVisibleForEdit = false;
            this.apiSubstationInfo(this.substationId);
          }
        )
        .catch(
          error => {
            this.$toast({ type: 'fail', message: `分站赛信息提交失败 ${error.error.message}` });
          }
        );
    },
    // ---
    formatLeagueCompetition (data) {
      const _info = data.leagueCompetition;
      const startDate = _info.startTime.slice(0, 10);
      const endDate = _info.endTime.slice(0, 10);
      const sDateArr = startDate.split('-');
      const eDateArr = endDate.split('-');
      const _minDate = new Date(sDateArr[0], sDateArr[1] - 1, sDateArr[2]);
      const _maxDate = new Date(eDateArr[0], eDateArr[1] - 1, eDateArr[2]);
      this.minDate = _minDate;
      this.maxDate = _maxDate;
    },
    // 获取认证等级字典
    getLevelDictList(id) {
      api_GET_EventsManagementCompetitionRequestCompetitionCertificationLevelListLeagueCompetitionId(id)
        .then(
          res => {
            this.levelList = res;
          }
        )
        .catch(
          error => {
            this.$toast({ type: 'fail', message: `认证等级获取失败 ${error.error.message}` });
          }
        );
    },
    // 确认认证等级选择
    onConfirmPicker(value) {
      this.address = value;
      this.levelShowName = value.name;
      this.vo.competitionCertificationLevelId = value.id;
      this.showPicker = false;
    },
    // 数字软键盘输入
    onInputNumPanel(value) {
      const _len = this.vo.responsiblePersonPhone.length;
      if (_len >= 11) return;
      this.vo.responsiblePersonPhone = this.vo.responsiblePersonPhone + value;
    },
    // 数字软键盘删除
    onDeleteNumPanel() {
      this.vo.responsiblePersonPhone = this.vo.responsiblePersonPhone.slice(0, -1);
    },
    // 确认选择日期
    onConfirmDate(date) {
      const [start, end] = date;
      const _start = new Date(start);
      const _sYear = _start.getFullYear();
      const _sMonth = _start.getMonth() < 9 ? '0' + (_start.getMonth() + 1) : _start.getMonth() + 1;
      const _sDay = _start.getDate() > 9 ? _start.getDate() : '0' + _start.getDate();

      const _etart = new Date(end);
      const _eYear = _etart.getFullYear();
      const _eMonth = _etart.getMonth() < 9 ? '0' + (_etart.getMonth() + 1) : _etart.getMonth() + 1;
      const _eDay = _etart.getDate() > 9 ? _etart.getDate() : '0' + _etart.getDate();

      this.showCalendar = false;
      this.showDate = `${_sYear}-${_sMonth}-${_sDay} 至 ${_eYear}-${_eMonth}-${_eDay}`;
      this.vo.startTime = `${_sYear}-${_sMonth}-${_sDay}`;
      this.vo.endTime = `${_eYear}-${_eMonth}-${_eDay}`;
    },
    // ---
    // 错误图片处理
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    },
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style>
  .edit_btn_style .van-button__text {
    font-size: 13px;
    font-weight: 400;
    color: #666;
    line-height: 19px;
    margin-left: 6px;
  }
</style>

<style lang="scss" scoped>
/* game */
  .substation_details {
    padding-top: 10px;
  }
  .model_content {
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin: 0 auto 10px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
  }
  .model_content_top {
    padding-bottom: 5px;
  }
  .model_content_topImg {
    padding-top: 10px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 4px;
    }
  }
  .model_content_topInfo {
    margin-left: 80px;
  }
  .topInfo_name {
    padding-right: 40px;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
  }
  .topInfo_status {
    display: inline-block;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 400;
    color: #ffffff;
    line-height: 18px;
    border-radius: 12px;
    background-color: #c6c6c6;
  }
  .status_Approved {
    background-color: #f79600;
  }
  .status_ApproveSuccess {
    background-color: #6dd400;
  }
  .model_content_bottom {
    padding-top: 10px;

  }

/* details */
  .detail_item {
    margin-bottom: 10px;
  }
  .detail_label {
    font-size: 13px;
    font-weight: 400;
    color: #666666;
    line-height: 19px;
  }
  .detail_content {
    margin-left: 65px;
    font-size: 13px;
    font-weight: 400;
    color: #333333;
    line-height: 19px;
  }

/** bottom btn */
  .bottom_btn {
    position: fixed;
    height: 80px;
    padding: 20px;
    width: 100%;
    left: 0;
    bottom: 0;
  }
  .bottom_btn_style {
    height: 40px;
    border-radius: 4px;
  }
</style>
